<template>
  <div style="width:100%;height:100%;position:relative;float:left;">
    <div
      style="position:relative;width:100%;height:90%;box-shadow: 0 0 10px rgb(190,190,190);border-radius:10px;"
    >
      <img
        src="imgs/blockclass/more.png"
        style="position:absolute;right:10px;top:10px;height:12px;width:20px;"
      />
      <div
        v-bind:style="{
          position: 'absolute',
          top: 15 + 18 * index + '%',
          left: '0',
          width: '100%',
          height: '15%'
        }"
        class="sc-display"
        v-for="(item, index) in textlist.list"
        :key="index"
      >
        <img
          src="imgs/blockclass/right.png"
          style="height:14px;width:14px;padding:0 10px 0 15px;"
        />
        <span
          class="font14c moreinfo border-none"
          style="padding-right:5px;"
          @click="goToArticlePage(item)"
          >{{ item.title }}</span
        >
      </div>
    </div>
    <div
      style="position:absolute;bottom:0;left:20%;width:60%;height:20%;background-color:#fff;box-shadow: 0 3px 3px rgb(210,210,210);border-radius:0 0 10px 10px;"
      class="cc-display"
    >
      <img
        src="imgs/blockclass/mark.png"
        style="height:14px;width:10px;margin:0 10px;"
      />
      <span class="font16d moreinfo">{{ textlist.title }}</span>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "BlockClass",
  props: {
    textlist: Object
  },

  methods: {
    /**
     * @method goToArticlePage && 跳转到文章阅读页面
     */
    goToArticlePage(val) {
      this.$router.push({ path: `article/${val.id}` });
    }
  }
};
</script>
